package com.gin.kotlin.gf2gamecommunity.base.composable

import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredWidth
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Person
import androidx.compose.material3.CenterAlignedTopAppBar
import androidx.compose.material3.DrawerValue
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.ModalDrawerSheet
import androidx.compose.material3.ModalNavigationDrawer
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.rememberDrawerState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.runtime.snapshotFlow
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import com.gin.kotlin.gf2gamecommunity.R
import kotlinx.coroutines.launch

/**
 * 页面状态
 * @param name 页面名称（底部导航按钮名称）
 * @param icon 底部导航栏icon
 * @param content 页面正文内容
 * @constructor
 */
data class PageState(val name: String, val icon: @Composable () -> Unit, val content: @Composable () -> Unit)

/**
 * 带底部导航栏的横向翻页首页
 * @param states 页面状态
 * @param initialIndex 初始页位置
 * @param drawerSheetContent 抽屉内容
 * @param actions 右上角按钮
 */
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun HorizontalPagerIndex(
    states: List<PageState>,
    initialIndex: Int = 1,
    drawerSheetContent: @Composable() (ColumnScope.() -> Unit),
    actions: @Composable() (RowScope.() -> Unit) = {}
) {
    // 选中的index
    var selectedIndex by remember { mutableIntStateOf(initialIndex) }
    // 分页器状态
    val pagerState = rememberPagerState(pageCount = { states.size }, initialPage = initialIndex)
    // 设置初始页
    val coroutineScope = rememberCoroutineScope()
    // 监控当前页的变化，切换页面时同步修改  selectedIndex 的值，无论是通过手势操作还是点击按钮均会触发
    LaunchedEffect(pagerState) { snapshotFlow { pagerState.currentPage }.collect { page -> selectedIndex = page } }

    // 界面 todo 抽屉状态初始打开
    // val drawerState = rememberDrawerState(initialValue = DrawerValue.Open)
    val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
    val scope = rememberCoroutineScope()
    ModalNavigationDrawer(drawerContent = { ModalDrawerSheet(modifier = Modifier.requiredWidth(240.dp), content = drawerSheetContent) }, drawerState = drawerState) {
        Scaffold(
            modifier = Modifier.fillMaxSize(),
            topBar = {
                CenterAlignedTopAppBar(
                    title = { Text(text = stringResource(R.string.app_name)) },
                    actions = actions,
                    // 打开或关闭抽屉
                    navigationIcon = {
                        IconButton(onClick = {
                            scope.launch { drawerState.apply { if (isClosed) open() else close() } }
                        }) {
                            Icon(imageVector = Icons.Filled.Person, contentDescription = "用户按钮")
                        }
                    },
                )
            },
            // 底部导航栏
            bottomBar = {
                NavigationBar {
                    states.forEachIndexed { index, state ->
                        NavigationBarItem(
                            // 按钮名称
                            label = { Text(state.name) },
                            // 按钮是否已选中，根据按钮序号与 selectedIndex 是否一致来决定
                            selected = selectedIndex == index,
                            // 点击按钮时的操作，通过 pagerState 切换页面
                            onClick = { coroutineScope.launch { pagerState.scrollToPage(index) } },
                            // 按钮的icon
                            icon = state.icon,
                        )
                    }
                }
            }
        ) { innerPadding ->
            // 横向分页器
            HorizontalPager(
                state = pagerState,
                modifier = Modifier
                    .padding(innerPadding)
                    .fillMaxHeight(),
                verticalAlignment = Alignment.Top
            ) { page -> states[page].content() }
        }
    }
}